
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
    <meta name="author" content="阿里巴巴国际UED前端">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <!-- Google Web Fonts -->

    <link rel="stylesheet" href="__PUBLIC__/dist/css/sm.css">
    <link rel="stylesheet" href="__PUBLIC__/dist/css/sm-extend.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/demos.css">

    <link rel="apple-touch-icon-precomposed" href="__PUBLIC__/assets/img/apple-touch-icon-114x114.png">
    <script src="__PUBLIC__/assets/js/zepto.js"></script>
    <script src="__PUBLIC__/assets/js/config.js"></script>
    <script>
      //ga
    </script>
    <script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?ba76f8230db5f616edc89ce066670710";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>

  </head>
  <body>
    <div class="page-group">
    <div class="page" id="page-index">
  <header class="bar bar-nav">
    <a class="icon icon-me pull-left open-panel" data-panel=".panel-left"></a>
    <a class="button button-link button-nav pull-right open-popup" data-popup=".popup-about">
     <span class="icon icon-friends"></span>
    </a>
    <h1 class="title">小兔</h1>
  </header>
  <div class="bar bar-standard bar-footer">
    <nav class="bar bar-tab">
    <a class="tab-item external active" placeholder="选择手机" id="picker">
      筛选
    </a>
    <a class="tab-item external open-popup" href="#" data-popup=".popup-fb">
      发布动态
    </a>
    <a class="tab-item external" href="__CONTROLLER__/me">
      我
    </a>

  </nav>
  </div> 
	<div class="content">
	<div class="content-block-title">
	<div class="searchbar row">
        <div class="search-input col-85">
          <input type="search" id="search" placeholder="输入关键字...">
        </div>
        <a class="button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
      </div></div>



<foreach name="statuses" item="vo" >
    <div class="card facebook-card">
      <div class="card-header no-border">
        <div class="facebook-avatar"><img src="{$vo.user.profile_image_url}" width="34" height="34"></div>
        <div class="facebook-name">{$vo.user.name}</div>
        <div class="facebook-date">{$vo.user.created_at|strtotime|date="y-m-d",###}</div>
      </div>
      <div class="card-content">{$vo.text}</div>
      <div class="card-footer no-border">
        <a href="#" class="link">赞({$vo.user.reposts_count})</a>
        <a href="#" class="link">评论({$vo.user.comments_count})</a>
        <a href="#" class="link">分享({$vo.user.attitudes_count})</a>
      </div>
    </div>
</foreach>



    <div class="card facebook-card">
      <div class="card-header no-border">
        <div class="facebook-avatar"><img src="https://scontent.cdninstagram.com/t51.2885-19/s150x150/14693777_321154808259200_72606082836463616_a.jpg" width="34" height="34"></div>
        <div class="facebook-name">shiyuwufeng</div>
        <div class="facebook-date"></div>
      </div>
      <div class="card-content"></div>
      <div class="card-footer no-border">
       <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/14730505_317672545272208_2137468557359841280_n.jpg" width="40" height="40"/>
      </div>
    </div>



  </div>
</div>

</div>
<div class="popup popup-about">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-right close-popup">
      关闭
    </a>
    <h1 class="title">选择联系人</h1>
  </header>
  <div class="content">
    <div class="list-block contacts-block">
      <div class="list-group">
        <ul>
          <li class="list-group-title">A</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题1</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题2</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题3</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题4</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题5</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题6</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题7</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题8</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-group">
        <ul>
          <li class="list-group-title">B</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题1</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题2</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题3</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题4</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题5</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题6</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-group">
        <ul>
          <li class="list-group-title">C</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题1</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题2</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题3</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题4</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题5</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题6</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题7</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-group">
        <ul>
          <li class="list-group-title">V</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">标题1</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="popup popup-fb">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-right close-popup">
      关闭
    </a>
    <h1 class="title">发布动态</h1>
  </header>
  <div class="content">
    <div class="content-inner">
    <form action="__CONTROLLER__/index" method="post">
      <div class="content-block">
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title label">请输入文字</div>
              <div class="search-input col-85">
				<input type="text" id="search" name="text" placeholder="限制140字以内" style="height:150px;text-align:left;top:5px">
			  </div>
            </div>
          </div>
        <p><input type="submit" class="button close-popup" value="确定"></p>
      </div>
    </form>
    </div>
  </div>
</div>

<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal">
  <div class="content-block">
    <p>这是一个侧栏</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>
<div class="panel panel-right panel-cover">
  <div class="content-block">
    <p>这是右侧栏，panel-cover模式</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>



    </div>
    <script src="__PUBLIC__/dist/js/sm.js"></script>
    <script src="__PUBLIC__/dist/js/sm-extend.js"></script>
    <script src="__PUBLIC__/dist/js/sm-city-picker.js"></script>
    <script src="__PUBLIC__/assets/js/demos.js"></script>
  </body>
</html>
